<template>
  <div class="image-grid-demo">
    <h3>图片网格布局演示</h3>

    <div class="demo-section">
      <h4>1张图片 - 单列布局</h4>
      <div class="images-grid grid-single">
        <div class="demo-image">1</div>
      </div>
    </div>

    <div class="demo-section">
      <h4>2张图片 - 2列等宽</h4>
      <div class="images-grid grid-double">
        <div class="demo-image">1</div>
        <div class="demo-image">2</div>
      </div>
    </div>

    <div class="demo-section">
      <h4>3张图片 - 第一张占2/3，后两张垂直排列</h4>
      <div class="images-grid grid-triple">
        <div class="demo-image">1</div>
        <div class="demo-image">2</div>
        <div class="demo-image">3</div>
      </div>
    </div>

    <div class="demo-section">
      <h4>4张图片 - 2x2网格</h4>
      <div class="images-grid grid-four">
        <div class="demo-image">1</div>
        <div class="demo-image">2</div>
        <div class="demo-image">3</div>
        <div class="demo-image">4</div>
      </div>
    </div>

    <div class="demo-section">
      <h4>6张图片 - 第一行2张，其余3张</h4>
      <div class="images-grid grid-five-six">
        <div class="demo-image">1</div>
        <div class="demo-image">2</div>
        <div class="demo-image">3</div>
        <div class="demo-image">4</div>
        <div class="demo-image">5</div>
        <div class="demo-image">6</div>
      </div>
    </div>

    <div class="demo-section">
      <h4>9张图片 - 3x3网格</h4>
      <div class="images-grid grid-seven-nine">
        <div class="demo-image">1</div>
        <div class="demo-image">2</div>
        <div class="demo-image">3</div>
        <div class="demo-image">4</div>
        <div class="demo-image">5</div>
        <div class="demo-image">6</div>
        <div class="demo-image">7</div>
        <div class="demo-image">8</div>
        <div class="demo-image">9</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .image-grid-demo {
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
  }

  .demo-section {
    margin-bottom: 2rem;

    h4 {
      margin-bottom: 1rem;
      color: var(--text-primary);
    }
  }

  .images-grid {
    display: grid;
    gap: 0.4rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 1rem;

    &.grid-single {
      grid-template-columns: 1fr;
      max-width: 400px;

      .demo-image {
        aspect-ratio: 16/10;
        max-height: 300px;
      }
    }

    &.grid-double {
      grid-template-columns: repeat(2, 1fr);

      .demo-image {
        aspect-ratio: 1;
      }
    }

    &.grid-triple {
      grid-template-columns: 2fr 1fr;
      grid-template-rows: repeat(2, 1fr);

      .demo-image:first-child {
        grid-row: span 2;
        aspect-ratio: 3/4;
      }

      .demo-image:not(:first-child) {
        aspect-ratio: 1;
      }
    }

    &.grid-four {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);

      .demo-image {
        aspect-ratio: 1;
      }
    }

    &.grid-five-six {
      grid-template-columns: repeat(3, 1fr);

      .demo-image:nth-child(-n + 2) {
        grid-column: span 1.5;
      }

      .demo-image {
        aspect-ratio: 1;
      }
    }

    &.grid-seven-nine {
      grid-template-columns: repeat(3, 1fr);

      .demo-image {
        aspect-ratio: 1;
      }
    }
  }

  .demo-image {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: var(--radius-sm);
  }
</style>
